<template>
    <div class="action-bar-container">
        <img v-if="global.vueHistoryPagePath.length > 1" @click="router.back()" class="left-icon"
            src="@assets/images/arrow_left_white.png" />
        <div class="title">{{ title }}</div>
    </div>
</template>

<script setup>
import { inject } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter();

const global = inject('global')
defineProps({
    title: {
        type: String,
        default: '',
    },
});
</script>

<style lang="scss" scoped>
.action-bar-container {
    width: 100%;
    height: 2.2rem;
    background-color: #4F423D;
    color: #D8B456;
    font-size: .85rem;
    display: flex;
    align-items: center;
    padding: 0 .7rem;
}

.left-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.left-icon+div {
    margin-right: 1.2rem;
}

.title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>